<template>
  <div class="deshboard">
    <h1 class="subheading grey--text">首页</h1>
    <v-container class="my-5">

      <v-layout
        row
        class="mb-3"
      >

        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-btn
              small
              depressed
              color="mr-3 grey--text"
              @click="sortBy('title')"
              v-on="on"
            >
              <v-icon
                left
                small
              >folder</v-icon>
              <span class="caption text-lowercase">按项目名称排序</span>
            </v-btn>
          </template>
          <span>点击该按钮，对列表按项目名称排序</span>
        </v-tooltip>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-btn
              small
              depressed
              color="mr-3 grey--text"
              @click="sortBy('person')"
              v-on="on"
            >
              <v-icon
                left
                small
              >person</v-icon>
              <span class="caption text-lowercase">按项用户名称排序</span>
            </v-btn>
          </template>
          <span>点击该按钮，对列表按用户名称排序</span>
        </v-tooltip>
      </v-layout>

      <v-card
        flat
        v-for="project in projects"
        :key="project.title"
      >
        <v-layout
          row
          wrap
          :class="`pa-3 project ${project.status}`"
        >
          <v-flex
            xs12
            md6
          >
            <div class="caption grey--text">项目名称</div>
            <div>{{ project.title }}</div>
          </v-flex>

          <v-flex
            xs6
            sm4
            md2
          >
            <div class="caption grey--text">用户</div>
            <div>{{ project.person }}</div>
          </v-flex>

          <v-flex
            xs6
            sm4
            md2
          >
            <div class="caption grey--text">创建时间</div>
            <div>{{ project.due }}</div>
          </v-flex>

          <v-flex
            xs6
            sm4
            md2
          >
            <div>
              <v-chip
                small
                :class="`${project.status} white--text caption my-2`"
              >{{ project.status }}</v-chip>
            </div>
          </v-flex>
        </v-layout>
        <v-divider></v-divider>
      </v-card>

    </v-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      projects: [
        { title: '创建一个新Web站点', person: '如非客', due: '2020-01-08', status: 'ongoing' },
        { title: '完成Web首页页面', person: '如非客', due: '2020-01-04', status: 'complete' },
        { title: '学号Javascript Vue Nodejs', person: '思浪', due: '2020-01-04', status: 'complete' },
        { title: '入门PHP', person: '浪痕', due: '2019-11-10', status: 'overdue' }
      ]
    }
  },
  methods: {
    sortBy (prop) { // 按对应的参数排序
      this.projects.sort((a, b) => a[prop] < b[prop] ? -1 : 1)
    }
  }
}
</script>

<style scoped>
.project.complete {
  border-left: 8px solid #3cd1c2;
}
.project.ongoing {
  border-left: 8px solid orange;
}
.project.overdue {
  border-left: 8px solid tomato;
}
.v-chip.complete {
  background: #3cd1c2 !important;
}
.v-chip.ongoing {
  background: #ffaa2c !important;
}
.v-chip.overdue {
  background: #f83e70 !important;
}
</style>
